<template>
	<div class="app-wallet-balance-collapse">
		<div class="flex items-center h-9 app-text-react" @click="emits('update:expand', !expand)">
			<BaseText :text="title" :textT="titleT" />
			<div class="ml-auto size-4">
				<BaseIcon
					class="block text-t-3 duration-300 -rotate-180"
					name="down"
					size="16"
					:class="{ '!-rotate-90': !expand }" />
			</div>
		</div>
		<n-collapse-transition :show="expand">
			<slot />
		</n-collapse-transition>
	</div>
</template>

<script setup lang="ts">
import { NCollapseTransition } from 'naive-ui'
import { BaseIcon, BaseText } from '@/components/base'

defineProps({
	expand: {
		type: Boolean,
		default: true
	},
	title: {
		type: String
	},
	titleT: {
		type: [String, Array]
	}
})
const emits = defineEmits(['update:expand'])
</script>

<style scoped></style>
